<template>
  <div class="main">
    <section>
      <el-table ref="multipleTable" v-loading="listLoading" :data="list" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
        <el-table-column align="center" label="id" prop="id"></el-table-column>
        <el-table-column align="center" label="说明" prop="explain"></el-table-column>
        <el-table-column align="center" label="积分数" prop="integralDesc"></el-table-column>
        <el-table-column align="center" label="操作时间">
          <template slot-scope="scope">
            <span>{{ formatDate(scope.row.operatorTime, 'YYYY-MM-DD HH:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作人" prop="lastOperator"></el-table-column>
        <el-table-column align="center" label="备注" prop="remark">
          <template slot-scope="scope">
            <div style="text-align:left;">备注:{{scope.row.remark}}</div>
            <div v-if="scope.row.picUrl" style="text-align:left;margin-top:5px;">图片:
                <img style="vertical-align:top;" :src="item" alt="图片" v-for="(item) in (scope.row.picUrl).split(',')" :key="item+Math.random()" class="img">
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page.sync="listQuery.pageNo"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="listQuery.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </section>
  </div>
</template>
<script>
export default {
  name: 'IntegralOperateList',
  data() {
    return {
      changeTypes: {
        '1': '转入升级',
        '2': '购买特权包升级',
        '3': '团队直推升级'
      },
      listQuery: {
        boxUserId: '',
        pageNo: 1,
        pageSize: 10
      },
      listLoading: false,
      list: [],
      listTotal: 0 // 总条数
    }
  },
  created() {
    this.getList()
  },
  methods: {
    search() {
      this.getList()
    },
    getList() {
      this.listQuery.boxUserId = this.$route.params.boxUserId
      this.listLoading = true
      this.request({
        url: '/bsnl-product/box/user-level-info/user-integral-change-log/list',
        method: 'get',
        params: this.listQuery
      }).then((res) => {
        this.list = res.data.list
        this.listTotal = res.data.total
        this.listLoading = false
      }).catch(err => {
        console.log(err)
        this.list = []
        this.listTotal = 0
        this.listLoading = false
      })
    },
    handleSizeChange(value) {
      this.listQuery.pageSize = value
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val
      this.getList()
    }
  }
}
</script>
<style lang="scss">
    @import "../../../styles/mixin";
    .banner-container{
        .avatar-uploader .el-upload{
            width: 120px;
            height: 120px;
            line-height: 118px;
        }
    }
    .img {
      width: 60px;
      height: 60px;
      margin-right: 10px;
      cursor: pointer;
    }
    .activity-img{
        @include flex;
        @include center;
        min-height: 60px;
        img{
            width:100%;
            height: 100%;
            max-width: 60px;
            max-height: 60px;
        }
    }
    .el-row{
        margin-bottom: 12px;
    }
    .resourceImg{
        width: 60px;
        height: 60px;
    }
    .el-col-3 {
        margin-right: 10px;
    }
    #auditDialog {
      .resource_img{
        width: 60px;
        height: 60px;
        float: left;
        margin-right: 10px;
      }
      .el-dialog__body{
        padding:25px 0px 30px;
      }
      .el-form{
        width: 100%;
        font-size:60px;
      }
      .singleAuditContent{
        @include scrollbar(8);
        height: 350px;
        overflow-y: scroll;
      }
      .bodyBottom{
        border-top: 1px solid #909399;
        padding-top: 22px;
        .avatar-uploader .el-upload{
          width: 60px;
          height: 60px;
        }
        #upvideo_img{
          width: 60px;
          height: 60px;
        }
      }
      .batchAuditContent{
        margin: 0px 30px;
        li{
          margin-top: 20px;
          border-bottom: 1px solid#909399;
          &:first-child{
            margin-top: 0px;
          }
          &:last-child{
            border-bottom: none;
          }
          p{
            margin-bottom: 10px;
            font-size: 16px;
          }
          .batchAuditImg{
            img{
              width: 60px;
              height: 60px;
            }
          }
          .el-icon-circle-close{
            color: red;
            font-size: 22px;
            margin-left: 10px;
          }
          .el-row{
            margin-bottom: 20px;
          }
        }
      }
    }
</style>
